<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="范珍">
    <title>vue组件5--自定义组件的v-model</title>
    <link rel="stylesheet" href="index.css">
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <p>r：{{r}}</p>
        <slider v-model="r"></slider>
    </div>
    <script>
        Vue.component('slider', {
            props:['value'],
            template: `<div class="slider" @mousedown="startMove" @mouseup="stopMove" @mouseleave="stopMove"> 
                            <div class="bar">
                                <div class="dot" :style="'left:' + (value*580-20) + 'px'" ></div>
                            </div>
                        </div>`,
            methods:{
                startMove:function(event){
                    // event.currentTarget: div.slider
                    event.currentTarget.onmousemove = function(e){
                        console.log(e.currentTarget);
                        var distance = e.clientX - e.currentTarget.offsetLeft - 10 - 20 ;
                        distance = distance < -20 ? -20 : (distance > 560 ? 560 : distance);
                        // e.currentTarget.firstChild.firstChild: div.dot
                        e.currentTarget.firstChild.firstChild.style.left = distance + 'px';
                        this.$emit('input',(distance+20)/580);
                    }.bind(this);
                },
                stopMove:function(event){
                    event.currentTarget.onmousemove = null;
                }
            }
        })
        new Vue({
            el: '#app',
            data: {
                r:0.5
            }
        })
    </script>
</body>

</html>